<template>
  <div>
    <!-- getConfigStates: {{ getConfigStates() }} -->
    <!-- {{ data }} -->

    <!-- :data="getDateState()"
      :states="getConfigStates()"
      :buttons="getConfigButtons()"
      @button-click="buttonClick" -->

    <ViewStates
      :data="getWorkflowState()"
      :steps="getWorkflowSteps()"
      :buttons="getWorkflowButtons()"
      @button-click="buttonClick"
    />
    <div v-for="fld in getConfigFields()" :key="fld.name">
      <ViewCell
        v-if="!fld.hidden"
        :data="data"
        :config="{ ...fld }"
        :model="model"
      />
    </div>

    <van-collapse v-model="activeName" accordion>
      <div v-for="page in getPages()" :key="page.name">
        <div v-if="checkOne2many(page)">
          <van-collapse-item
            :title="page.label || page._one2many.label"
            :name="page.name"
            :value="data[`${page._one2many.name}__count`]"
          >
            <ViewO2m
              :data="data[`${page._one2many.name}__objects`]"
              :config="{ ...page._one2many }"
            />
          </van-collapse-item>
        </div>

        <div v-else>
          <van-collapse-item :title="page.label" :name="page.name">
            <div v-for="fld2 in fieldsDictToList(page.fields)" :key="fld2.name">
              <ViewCell :data="data" :config="{ ...fld2 }" :model="model" />
            </div>
          </van-collapse-item>
        </div>
      </div>
    </van-collapse>
  </div>
</template>

<script>
import ViewStates from './ViewStates'

import ViewCell from './ViewCell'
import ViewO2m from './ViewO2m'

import ViewMixin from './ViewMixin'

export default {
  name: 'ViewPage',
  components: { ViewStates, ViewCell, ViewO2m },

  mixins: [ViewMixin],

  props: {
    model: { type: String, default: undefined }
  },

  data() {
    return {}
  },
  computed: {
    //
  },

  watch: {
    $route(to, from) {
      // console.log('$route', to, from)
      location.reload()
    }
  },

  async created() {
    //
  },

  mounted() {
    // console.log('ViewPage, config,', this.config.name, this.config)
  },

  methods: {
    //

    async buttonClick(name, payload) {
      console.log('buttonClick', name, payload, this.config, this.data)
      if (payload.type === 'object') {
        await this.$parent.onWriteLike(name)
      } else if (payload.type === 'action') {
        console.log('onclick, action, ok,')

        await this.$parent.onWizardCreate(name, payload)
      }

      //

      // const Model = this.config.Model

      // const ret = Model.call(name, [this.data.id])
      // console.log('buttonClick', ret)

      // await this.$store.dispatch('object/browse_one', {
      //   _model: model,
      //   id: rid,
      //   fields
      // })
    }
  }
}
</script>

<style type="text/css"></style>
